<template>
  <div class="cs-page-container">
    <div class="cs-filter-container">
      <el-input
        v-model="listQuery.familyId"
        clearable
        placeholder="家族ID"
        style="width:130px"
      />
      <el-input
        v-model="listQuery.leaderId"
        clearable
        placeholder="族长ID"
        style="width:130px"
      />
      <el-input
        v-model="listQuery.familyName"
        clearable
        placeholder="家族名称"
        style="width:130px"
      />
      <el-date-picker
        v-model="daterangeValue"
        :picker-options="daterangePickerOptions"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="创建起始时间"
        end-placeholder="创建结束时间"
        value-format="yyyy/MM/dd"
        style="width:250px"
        @change="daterangeChanged"
      />
      <el-button
        type="primary"
        size="small"
        icon="el-icon-search"
        @click="handleFilter"
      >
        搜索
      </el-button>
      <el-button
        type="info"
        size="small"
        icon="el-icon-refresh-right"
        @click="resetFilter"
      >
        重置
      </el-button>
    </div>
    <div class="cs-filter-result">
      <el-table
        v-loading="listLoading"
        :data="list"
        :height="'calc(100vh - 230px)'"
        border
        fit
        size="small"
        highlight-current-row
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <el-table-column align="center" label="家族id" prop="familyId"> </el-table-column>
        <el-table-column align="center" label="族长id" prop="leaderId">
          <template slot-scope="{ row }">
            <TooptipsCom :user-id="row.leaderId" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="家族名称" prop="familyName"> </el-table-column>
        <el-table-column align="center" label="家族头像" prop="familyImage">
          <template slot-scope="{ row }">
            <image-tooltip :image-id="row.familyImage">
              <img
                v-if="row.familyImage"
                slot="img"
                :src="row.familyImage + '?x-oss-process=image/resize,w_175'"
                style="cursor: pointer; width: 100px"
                title="点击放大"
                @click="zoomImage(row.familyImage)"
              />
            </image-tooltip>
          </template>
        </el-table-column>
        <el-table-column align="center" label="家族简介" prop="familyProfile"> </el-table-column>
        <el-table-column align="center" label="家族设置" prop="inviteReview">
          <template slot-scope="{ row }">
            <span>{{ row.inviteReview? '审核' : '不审核' }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="家族人数" prop="familyCount"> </el-table-column>
        <el-table-column align="center" label="家族状态" prop="deleteFlag">
          <template slot-scope="{ row }">
            <span>{{ row.deleteFlag === 1? '删除' : '未删除' }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="创建时间">
          <template slot-scope="{ row }">{{ row.createTime | parseTime }}</template>
        </el-table-column>

        <el-table-column align="center" label="操作">
          <template slot-scope="{ row }">
            <el-button v-if="row.deleteFlag !== 1" type="primary" size="mini" @click="checkFamily(row.familyId)">
              查看
            </el-button>
            <el-button v-if="row.deleteFlag !== 1" type="primary" size="mini" @click="editFamily(row)">
              编辑
            </el-button>
            <el-button v-if="row.deleteFlag !== 1" type="danger" size="mini" @click="dissolution(row)">
              解散
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <TablePagination
        :current-page="listQuery.pageNum"
        :limit="listQuery.pageSize"
        :total="total"
        :loading="listLoading"
        @handleSizeChange="handleSizeChange2"
        @handleCurrentChange="handleCurrentChange2"
      />
    </div>
    <ImageViewer :visible.sync="showImage" :url="imageUrl" />
    <el-dialog title="查看家族" :visible.sync="dialogCheckFamily">
      <el-table
        :data="dialogCheckData.list"
        border
        fit
        size="small"
        highlight-current-row
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <el-table-column align="center" label="成员ID" prop="userId">
          <template slot-scope="{ row }">
            <TooptipsCom :user-id="row.userId" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="昵称" prop="nickName"> </el-table-column>
        <el-table-column align="center" label="性别" prop="gender">
          <template slot-scope="{ row }">
            <span>{{ row.gender | gender }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="职位" prop="professional"> </el-table-column>
        <el-table-column align="center" label="家族职位" prop="role">
          <template slot-scope="{ row }">
            <span>{{ roleItem[row.role] }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="注册时间" prop="createTime">
        </el-table-column>
        <el-table-column align="center" label="最后登录时间" prop="loginLastTime">
        </el-table-column>
      </el-table>
      <TablePagination
        style="display: block;"
        :current-page="dialogCheckData.query.pageNum"
        :limit="dialogCheckData.query.pageSize"
        :total="dialogCheckData.total"
        @handleSizeChange="handleSizeChange3"
        @handleCurrentChange="handleCurrentChange3"
      />
    </el-dialog>
    <el-dialog title="编辑家族" :visible.sync="dialogFamily">
      <el-form :model="dialogFamilyItem">
        <el-form-item label="家族名称：">
          <el-input
            v-model="dialogFamilyItem.familyName"
            clearable
            placeholder="请输入家族名称"
            style="width:200px"
          />
        </el-form-item>
        <el-form-item label="家族宣言：">
          <el-input
            v-model="dialogFamilyItem.familyProfile"
            clearable
            placeholder="请输入家族宣言"
            style="width:300px"
          />
        </el-form-item>
        <el-form-item
          label="上传图片:"
          prop="cover"
        >
          <Upload
            :img="dialogFamilyItem.familyImage"
            :is-size="true"
            @change="imageChange"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFamily = false">取 消</el-button>
        <el-button type="primary" @click="saveFamily()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import TablePagination from '@/components/TablePagination'
import { xhrQueryFamilyInfo, xhrFamilyClose, xhrQueryFamilyMember, xhrUpdateFamilyInfo } from '@/api/account';
import ImageViewer from '@/components/ImageViewer'
import Upload from '@/components/Upload/SingleImage'
export default {
name: 'FamilyList',
  components: { TablePagination, ImageViewer, Upload },
  data() {
    return {
      total: 0,
      list: null,
      listLoading: false,
      dialogVisible: false,
      dialogCheckFamily: false,
      dialogCheckData: {
        list: [],
        total: 0,
        query: {
          pageNum: 1,
          pageSize: 20,
          familyId: null
        }
      },
      roleItem: {
        1: '长老',
        2: '副长老',
        3: '族长'
      },
      dialogFamily: false,
      dialogFamilyItem: {
        familyId: null,
        familyImage: null,
        familyName: null,
        familyProfile: null
      },
      daterangeValue: '',
      showImage: false,
      imageUrl: null,
      listQuery: {
        familyName: null,
        userId: null,
        pageNum: 1,
        pageSize: 100,
        startTime: null,
        endTime: null
      }
    }
  },
  created() {
    this.doSearch()
  },
  methods: {
    doSearch() {
      xhrQueryFamilyInfo(this.listQuery)
        .then(resp => {
          this.list = resp.data.list
          this.total = resp.data.total
          this.listLoading = false
        })
        .catch(err => {
          this.$message.error(err)
          this.listLoading = false
        })
    },
    familyMember() {
      xhrQueryFamilyMember(this.dialogCheckData.query)
        .then(resp => {
          this.dialogCheckData.list = resp.data.list
          this.dialogCheckData.total = resp.data.total
        })
        .catch(err => {
          this.$message.error(err)
          this.listLoading = false
        })
    },
    checkFamily(familyId) {
      this.dialogCheckData.query.familyId = familyId
      this.dialogCheckFamily = true
      this.familyMember()
    },
    handleSizeChange3(val) {
      this.dialogCheckData.query.pageSize = val
      this.familyMember()
    },
    handleCurrentChange3(val) {
      this.dialogCheckData.query.pageNum = val
      this.familyMember()
    },
    editFamily(row) {
      this.dialogFamilyItem = {
          familyId: row.familyId,
          familyImage: row.familyImage,
          familyName: row.familyName,
          familyProfile: row.familyProfile
      }
      this.dialogFamily = true
    },
    saveFamily() {
      xhrUpdateFamilyInfo(this.dialogFamilyItem)
        .then(resp => {
          this.$message.success('操作成功')
          this.doSearch()
          this.dialogFamily = false
        })
        .catch(err => {
          this.$message.error(err)
          this.listLoading = false
        })
    },
    dissolution(row) {
      xhrFamilyClose({ familyId: row.familyId })
        .then(resp => {
          this.$message.success('解散成功')
        })
        .catch(err => {
          this.$message.error(err)
          this.listLoading = false
        })
    },
    imageChange(fileList, type) {
      if (type === 'upload') {
        this.dialogFamilyItem = Object.assign(this.dialogFamilyItem, { familyImage: fileList[0].url })
      } else if (type === 'remove') {
        this.dialogFamilyItem = Object.assign(this.dialogFamilyItem, { familyImage: null })
      }
    }
  }
}
</script>

<style scoped>

</style>
